<template>
  <view class="details">
    <!-- 显示视频部分 -->
    <view class="details-video">
      <!-- <video src="" class="details-video__player"></video> -->
      <!-- 先拿view替代 -->
      <!-- <view class="details-video__player"></view> -->

      <live-player
          class="details-live__player"
          v-if="playType===1"
          :id="detailItem.datas.live_id"
          mode="live"
          :src="liveUrl"
          :autoplay="true"
          @statechange="statechange"
      ></live-player>

      <video
          v-if="playType===2"
          class="details-video__player"
          :id="detailItem.datas.live_id"
          :src="videoUrl"
          autoplay
      ></video>
      <!-- <text class="details-video__status">直播已结束</text> -->
    </view>

    <!-- 下面的使用统一宽度 -->
    <view class="details-main">
      <!-- 导航栏 -->
      <view class="details-bar details-wrapper flex">
        <view class="details-bar__item "
              v-for="(item,index) in barItems"
              :key="item.id"
              :class="{'details-bar__item--active':index === activeBar}"
              @click="changeBar(index)"
        >
          {{item.text}}
        </view>
      </view>

      <!-- 展示内容 -->
      <!-- 详情 -->
      <view class="details-detail"
            v-if="activeBar===0"
      >
        <!-- 标题区 -->
        <view class="details-detail__caption">
          <view class="details-detail__caption-title">{{detailItem.title}}</view>

          <view class="flex details-detail__caption-type">
            <image src="/static/address.png" mode="aspectFill" class="details-detail__caption-icon"></image>
            <text class="details-detail__caption-text">{{detailItem.start}}</text>
          </view>

          <view class="flex details-detail__caption-date">
            <image src="/static/time.png" mode="aspectFill" class="details-detail__caption-icon"></image>
            <!-- <text class="details-detail__caption-text">{{detailItem.start}} - {{detailItem.end}}</text> -->
            <text class="details-detail__caption-text">{{detailItem.datas.address}}</text>
          </view>

          <!-- 					<view class="flex details-detail__caption-addr">
                      <image src="../../static/detailsAddr.png" mode="aspectFill" class="details-detail__caption-icon"></image>
                      <text class="details-detail__caption-text details-detail__caption-text-intro">简介：</text>
                    </view> -->
        </view>

        <view class="details-detail__program-header details-wrapper">
          <view class="details-detail__program-header-title">直播节目（{{programNum}}）场</view>
          <!-- <text>下载</text> -->
        </view>

        <!-- 直播节目 -->
        <view class="details-detail__program details-wrapper">

          <view class="details-detail__program-item flex"
                v-for="(item,index) in detailItem.program"
                :key="item.id"
                @tap="changePlay(index)"
          >
            <view class="details-detail__program-item-desc ">
              <view class="details-detail__program-item-title"
                    :class="{'details-detail__program-item-title--active':item.program_type==='1'}"
              >{{item.title}}
              </view>

              <view class="details-detail__program-item-date"
                    :class="{'details-detail__program-item-date--active':item.program_type==='1'}"
              >{{item.program_time}}</view>



            </view>
            <view class="details-detail__program-item-status flex"
                  :class="{'details-detail__program-item-status--active':item.program_type==='1'}"
            >
              <image src="/static/downloadVideo.png" mode="aspectFill" class="details-detail__program-item-status-icon"
                     v-if="item.is_rtmp==='0'"
              ></image>
              <text v-if="playIndex===index&&playType===2">播放中</text>
              <text v-else>{{item.program_type_name}}</text>
            </view>
          </view>
        </view>

        <!-- 直播简介 -->
        <view class="details-detail__desc details-wrapper">
          <view class="details-detail__desc-title">直播简介</view>
          <view class="details-detail__desc-content">
            <!-- 直播简介内容 -->
          </view>
        </view>
      </view>

      <!-- 互动部分 -->
      <view class="details-interact details-wrapper"
            v-else-if="activeBar===1"
      >
        <view class="details-interact__header flex">
          <image src="/static/notice.png" mode="aspectFill" class="details-interact__header-icon"></image>
          <view class="details-interact__header-title flex-column">
            <text class="details-interact__header-title-main">欢迎来到直播间！</text>
            <text class="details-interact__header-title-sub">全民动动倡导绿色健康文化直播，不提倡 未成年人进行直播打赏充值。直播视频内容和评论严禁包含政治、低俗、色情等相关内容。如有违者，视情节轻重程度给与禁言禁播或封停账号处理。</text>
          </view>
        </view>

        <view class="details-interact__items">
          <view class="details-interact__item flex"
                v-for="item in interactionItems"
                :key="item.gf_id"
          >
            <image :src="item.gf_icon" mode="aspectFill" class="details-interact__item-avatar"></image>
            <view class="details-interact__item-info">
              <text class="details-interact__item-name">{{item.gf_name}}</text>
              <view class="details-interact__item-content">{{item.content}}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 图文部分 -->
      <view class="details-pic flex"
            v-else-if="activeBar===2"
      >
        <image
            class="details-pic__item"
            v-for="item in picItems"
            :key="item.id"
            :src="item.url" mode="aspectFill"
        ></image>
      </view>

      <!-- ------------------ -->
      <!-- 榜单部分 -->
      <view class="details-list details-wrapper"
            v-else-if="activeBar===3"
      >
        <view class="details-list__names flex">
          <!-- 					<view class="details-list__name details-list__name--left">礼物榜</view>
                    <view class="details-list__name">红包榜</view>
                    <view class="details-list__name details-list__name--active details-list__name--right">分享榜</view> -->
          <view class="details-list__name"
                v-for="(item,index) in listItems"
                :key="item.id"
                :class="{'details-list__name--left':index === 0,'details-list__name--active':index===activeList,'details-list__name--right':index ===listItems.length-1}"
                @click="changeList(index)"
          >
            {{item.name}}
          </view>
        </view>

        <!-- 礼物榜 -->
        <view class="details-list__users"
              v-if="activeList===0"
        >
          <view class="details-list__user flex"
                v-if="rewardItems.length!==0"
                v-for="item in rewardItems"
                :key="item.gf_id"
          >
            <text class="details-list__user-num">{{item.no}}</text>
            <view class="flex details-list__user-desc">
              <image :src="item.gf_icon" mode="aspectFill" class="details-list__user-avatar"></image>
              <text class="details-list__user-name">{{item.gf_name}}</text>
            </view>
            <!-- 分享榜 -->
            <text class="details-list__user-data">
              分享<text class="details-list__user-data-value">{{item.invite_num}}</text>人
            </text>
          </view>

          <view v-else>
            暂无排名
          </view>
        </view>

        <!-- 红包榜 -->
        <view class="details-list__users"
              v-else-if="activeList===1"
        >
          <view class="details-list__user flex"
                v-if="envelopesItems.length !== 0"
                v-for="item in envelopesItems"
                :key="item.gf_id"
          >
            <text class="details-list__user-num">{{item.no}}</text>
            <view class="flex details-list__user-desc">
              <image :src="item.gf_icon" mode="aspectFill" class="details-list__user-avatar"></image>
              <text class="details-list__user-name">{{item.gf_name}}</text>
            </view>
            <!-- 分享榜 -->
            <text class="details-list__user-data">
              打赏<text class="details-list__user-data-value">¥{{item.invite_num}}</text>人
            </text>
          </view>

          <view v-else>
            暂无排名
          </view>
        </view>

        <!-- 分享榜 -->
        <view class="details-list__users"
              v-else-if="activeList===2"
        >
          <view class="details-list__user flex"
                v-if="shareItems.length!==0"
                v-for="item in shareItems"
                :key="item.gf_id"
          >
            <text class="details-list__user-num">{{item.no}}</text>
            <view class="flex details-list__user-desc">
              <image :src="item.gf_icon" mode="aspectFill" class="details-list__user-avatar"></image>
              <text class="details-list__user-name">{{item.gf_name}}</text>
            </view>
            <!-- 分享榜 -->
            <text class="details-list__user-data">
              分享<text class="details-list__user-data-value">{{item.invite_num}}</text>人
            </text>
          </view>

          <view v-else>
            暂无排名
          </view>
        </view>
      </view>

      <!-- 商品 -->
      <view class="details-mall details-wrapper"
            v-else-if="activeBar===4"
      >
        <live-mall-item
            v-for="item in mallItems"
            :key="item.id"
            :data="item"
        ></live-mall-item>
      </view>
    </view>

    <!-- 底部展示作者信息区域 -->
    <view class="details-author details-wrapper flex"
          :class="{'details-author--fixed':footFixed}"
    >
      <!-- 不为互动展示这个 -->
      <view class="details-author__info flex"
            v-if="activeBar!==1"
      >
        <image src="/static/author.png" mode="aspectFill" class="details-author__info-avatar"></image>
        <view class="flex-column">
          <text class="details-author__info-name">{{detailItem.datas.club_name}}</text>
          <!-- <text class="details-author__info-date">202x2-12-24 10:00</text> -->
        </view>
      </view>

      <!-- 发布互动言论 -->
      <view class="details-speak"
            v-else>
        <input type="text" v-model="userComment" class="details-speak__input"
               @focus="speakInputClear"
               @blur="speakInputRenew"
        />
      </view>

      <view class="details-author__datas flex">

        <view class="details-author__data flex-column">
          <text class="details-author__data-value">{{detailItem.views}}</text>
          <image src="/static/views.png" mode="aspectFill" class="details-author__data-icon"></image>
        </view>

        <view class="details-author__data flex-column">
          <text class="details-author__data-value">{{detailItem.likes}}</text>
          <image src="/static/like.png" mode="aspectFill" class="details-author__data-icon"></image>
        </view>

        <view class="details-author__data flex-column">
          <text class="details-author__data-value">{{detailItem.comment_num}}</text>
          <image src="/static/comment.png" mode="aspectFill" class="details-author__data-icon"></image>
        </view>

        <view class="details-author__data flex-column">
          <text class="details-author__data-value">{{detailItem.subscribed}}</text>
          <image src="/static/subscribe.png" mode="aspectFill" class="details-author__data-icon"></image>
        </view>

        <view class="details-author__data flex-column">
          <text class="details-author__data-value">{{detailItem.share_num}}</text>
          <image src="/static/share.png" mode="aspectFill" class="details-author__data-icon"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref,getCurrentInstance, nextTick, watch } from 'vue';
import {onLoad,onReady,onShow} from '@dcloudio/uni-app'
import decLiveApi from "/api/dec/decIndex/decLiveApi";
import decMallApi from "/api/dec/decIndex/decMallApi";

// import { Live_detail_API,Share_rank_API,Envelopes_rank_API,Reward_rank_API,Live_show_pics_API ,Live_interaction_API,Get_live_mall_API} from '../../utils/apis';
// import liveMallItem from '@/pages/liveDetails/liveMallItem/liveMallItem.vue'

// 显示正在展示的tabbar内容
const activeBar = ref(4)

// 底部作者内容是否固定在底部，根据页面实际高度是否大于当前页面来判断
const footFixed = ref(false);

const instance = getCurrentInstance();

// 当前页面的直播详情id
// let liveId = 0;

// 直播详情的所需内容
// 给出默认值，不然渲染的时候高度计算错误
let detailItem = ref({
  views:0,
  likes:0,
  subscribes:0,
  share_num:0,
  comment_num:0
});
// 直播数量
const programNum = ref(0);

// 要播放的内容的地址
const videoUrl = ref();
const liveUrl = ref();

// 这是直播的
// const live_id = ref();

// 播放的内容下标
const playIndex = ref(0);
// 播放的内容
const playItem = ref(null);

// 判断播放的是直播还是视频,1为直播,2为视频
const playType = ref(2);



// 直播节目
const pogramItems = ref(null);

const barItems = ref([
  {'text':'直播',id:'bar01'},
  {'text':'互动',id:'bar02'},
  {'text':'图文',id:'bar03'},
  {'text':'排名',id:'bar04'},
  {'text':'商品',id:'bar05'},
])

// 互动部分
const interactionItems = ref(null);

// 用户评论内容
const userComment = ref('说一说')

// 图文部分
const picItems = ref(null);


// 榜单
const listItems = ref([
  {name:'礼物榜',id:'list01'},
  {name:'红包榜',id:'list02'},
  {name:'分享榜',id:'list03'},
])

const listItemsLength = listItems.value.length;

// 礼物榜单内容
const rewardItems = ref(null);
// 红包榜单内容
const envelopesItems = ref(null)

// 分享榜单内容
const shareItems = ref(null);

// 商品内容
const mallItems = ref(null);

// 对mall的page
const mallPage = ref(1);

const activeList = ref(0);

// 拉流的变化
function statechange(e){
  console.log('live-player code:', e.detail.code)
}

// 切换bar的值
function changeBar(index){
  activeBar.value = index;
  console.log('切换了tab栏内容');
  computeFixed();
}

// 切换排名内容
function changeList(index){
  activeList.value = index;
  computeFixed();
  console.log('切换了排名内容');
}

// 计算是否固定的函数
function computeFixed(){
  const {windowHeight} = uni.getWindowInfo();

  let mainHeight = 0;
  nextTick(()=>{
    const query = uni.createSelectorQuery().in(instance.proxy);
    query
        .select(".details-main")
        .boundingClientRect((data) => {
          // console.log("得到布局位置信息" + JSON.stringify(data));
          // console.log("节点离页面顶部的高度为" + data.height);
          mainHeight = data.height
          const totalHeight = videoHeight + mainHeight;
          footFixed.value = totalHeight <= windowHeight;
          // console.log('页面高度',totalHeight,windowHeight);
        })
        .exec();
  })
}

// 清空发布内容的函数
function speakInputClear(){
  userComment.value = ''
}

function speakInputRenew(){
  userComment.value = '说一说'
}

// 切换直播节目里面的内容，即播放内容
function changePlay(index){
  playItem.value = pogramItems.value[index];
  playIndex.value = index;

  // 直播结束，回放
  if(playItem.value.program_type === '2'){
    videoUrl.value = playItem.value.playback_url;
    playType.value = 2;
  }else if(playItem.value.program_type === '1'){	//正在直播
    // liveUrl
    console.log('liveurl：',liveUrl.value);
    playType.value = 1;
  }
}

// 获取直播详情函数
async function Get_Live_detail_API(live_id){
  let params = {
    live_id:live_id,
  };

  try{
    const res = await decLiveApi.Live_detail_API(params);
    console.log('单个直播详情：',res);
    // return res;
    detailItem.value ={
      datas:res.datas,//直播的datas
      title:res.datas.title,	//直播名称
      type:res.datas.live_type_name,  //直播类型
      start:res.datas.live_start, 	//直播开始时间
      end:res.datas.live_end,		//直播结束时间
      intro:res.datas.intro,		//直播简介链接
      program:res.program,	//直播节目单
      views:res.datas.clicked,	//浏览人数
      likes:res.datas.likes,	//点赞数
      subscribes:res.datas.subscribes,	//订阅数
      share_num:res.datas.share_num,	//分享数
      comment_num:res.datas.comment_num	,//评论数
      subscribed:res.datas.subscribed,	//1-已订阅，0-未订阅
      program_id:res.datas.program_id,//当前播放内容的id
      program_type:res.datas.program_type,//当前播放的是直播还是结束的
    }
    programNum.value = detailItem.value.program.length;

    pogramItems.value = detailItem.value.program;

    console.log('需要的数据：',detailItem.value);

    // 正在直播
    if(detailItem.value.program_type==='1'){
      playType.value=1;
      // liveUrl.value = detailItem.value.datas.live_source_flv_h;
      liveUrl.value = detailItem.value.datas.live_source_rtmp_h;
      console.log('live',liveUrl.value);
    }else if(detailItem.value.program_type==='2'){	//已结束
      playType.value=2;
      videoUrl.value = detailItem.value.datas.playback_url;
    }

    // console.log('已结束直播的item',overPogramItems.value);

  }catch(err){
    console.log('detail页面的Get_Live_detail_API失败！',err);
  }
}

// Base64 解码（支持 Unicode）
function base64DecodeUnicode(str) {
  return decodeURIComponent(Array.prototype.map.call(atob(str),
      c => '%' + c.charCodeAt(0).toString(16).padStart(2, '0')).join(''));
}

// 获取直播互动函数
async function Get_Live_interaction_API(live_id){
  let params = {
    live_id:live_id,
  };

  try{
    const res = await decLiveApi.Live_interaction_API(params);
    console.log('单个直播互动信息：',res);
    interactionItems.value = res.datas
    interactionItems.value.forEach(item=>{
      // Base64 解码
      const decodedUnicode = base64DecodeUnicode(item.content);
      console.log('解码后的文本:', decodedUnicode);
      item.content = decodedUnicode;
    })
  }catch(err){
    console.log('detail页面的Get_Live_interaction_API失败！',err);
  }
}

// 获取直播图文信息
async function Get_Live_show_pics_API(live_id){
  let params = {
    live_id:live_id,
  };

  try{
    const res = await decLiveApi.Live_show_pics_API(params);
    console.log('单个直播图文信息：',res);
    picItems.value = res.datas
    picItems.value.forEach(item=>{
      item.url = res.pic_url_head + item.url
    })
  }catch(err){
    console.log('detail页面的Get_Live_show_pics_API失败！',err);
  }
}

// 获取直播分享榜函数
async function Get_Share_rank_API(live_id){
  let params = {
    live_id:live_id,
  };

  try{
    const res = await decLiveApi.Share_rank_API(params);
    console.log('单个直播分享榜：',res);
    shareItems.value = res.datas
  }catch(err){
    console.log('detail页面的Get_Share_rank_API失败！',err);
  }
}

// 获取直播红包榜函数
async function Get_Envelopes_rank_API(live_id){
  let params = {
    live_id:live_id,
  };

  try{
    const res = await decLiveApi.Envelopes_rank_API(params);
    console.log('单个直播红包榜：',res);
    envelopesItems.value = res.datas
  }catch(err){
    console.log('detail页面的Get_Envelopes_rank_API失败！',err);
  }
}

// 获取直播礼物榜单函数
async function Get_Reward_rank_API(live_id){
  let params = {
    live_id:live_id,
  };

  try{
    const res = await decLiveApi.Reward_rank_API(params);
    console.log('单个直播礼物榜：',res);
    rewardItems.value = res.datas
  }catch(err){
    console.log('detail页面的Get_Reward_rank_API失败！',err);
  }
}

// 获取直播商品函数
async function Get_Get_live_mall_API(live_id){
  let params = {
    live_id:live_id,
    page:mallPage.value,
    per_page:10
  };

  try{
    const res = await decMallApi.Get_live_mall_API(params);
    console.log('单个直播商品：',res);
    mallItems.value = res.datas;
    mallItems.value.forEach(item=>{
      let baseUrl = 'https://upload.gfinter.net/'
      item.url = baseUrl+item.logo;
    })

    // mallItems.value = null;
  }catch(err){
    console.log('detail页面的Get_live_mall_API失败！',err);
  }
}

// watch(mallItems,(new_val)=>{
// 	console.log('mallItems更新',new_val);
// },
// { deep: true }
// )

// 初始化函数
function init(params){
  const {live_id} = params;

  Get_Get_live_mall_API(live_id);

  Get_Share_rank_API(live_id);

  Get_Envelopes_rank_API(live_id);

  Get_Reward_rank_API(live_id);

  Get_Live_show_pics_API(live_id);

  Get_Live_interaction_API(live_id);

  Get_Live_detail_API(live_id);
}



onLoad(()=>{
  const pages = getCurrentPages();
  const currentPage = pages[pages.length-1];
  console.log('details页面的路由参数：',currentPage.options);
  let live_id = currentPage.options.id;
  let params = {
    live_id:live_id,
  }

  init(params);
})



onShow(()=>{})

let videoHeight = 0;

onMounted(()=>{
  const query = uni.createSelectorQuery().in(instance.proxy);

  query
      .select(".details-video")
      .boundingClientRect((data) => {
        // console.log("得到布局位置信息" + JSON.stringify(data));
        // console.log("节点离页面顶部的高度为" + data.height);
        videoHeight = data.height
      })
      .exec();

  computeFixed()
})



</script>

<style lang="scss" scoped>
.details{
  width: 100%;
  padding-bottom: 50rpx;

  &-live{
    &__player{
      width: 100%;
      height: 405rpx;
    }
  }

  &-video{
    width: 100%;
    position: relative;
    &__player{
      width: 100%;
      height: 405rpx;
      // background-color: red;
    }

    &__status{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 122rpx;
      background-color: rgba(#000,.4);
      font-size: 34rpx;
      color: #fff;
      font-weight: 700;
      text-align: center;
      line-height: 122rpx;
    }
  }

  &-main{
    width: 100%;
  }
  // 统一宽度
  &-wrapper{
    padding: 0 24rpx;
  }

  // 导航栏
  &-bar{
    height: 90rpx;
    border-bottom: 4rpx solid #f5f5f5;
    justify-content: space-around;
    &__item{
      width: fit-content;
      font-size: 30rpx;
      color: #4f4f4f;
      height: 100%;
      line-height: 90rpx;
      &--active{
        color: #fe5100;
        // border-bottom: 4rpx solid #fb8406;
        // margin-bottom: -2rpx;
        font-weight: bold;
      }
    }
  }

  // 详情
  &-detail{
    // 标题区
    &__caption{
      width: 100%;
      height: 305rpx;
      border-bottom: 4rpx solid #f5f5f5;
      box-sizing: border-box;
      padding-left: 24rpx;
      &-title{
        font-size: 32rpx;
        color: #333333;
        // margin: 34rpx 0;
        margin-top: 20rpx;
        margin-bottom: 28rpx;
      }

      &-type{
        height: 40rpx;
        line-height: 40rpx;
        margin-bottom: 4rpx;
      }

      &-date{
        height: 40rpx;
        line-height: 40rpx;
        margin-bottom: 4rpx;
      }

      &-addr{
        // height: 34rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin-bottom: 4rpx;
      }

      &-icon{
        width: 24rpx;
        height: 24rpx;
        margin-right: 20rpx;
      }

      &-text{

        font-size: 28rpx;
        color: #575958;

        &-intro{
          width: 100%;
          text-overflow: ellipsis;
        }
      }
    }

    // 节目单
    &__program{
      // border-bottom: 4rpx solid #f5f5f5;
      box-sizing: border-box;
      padding-top: 36rpx;
      // margin-bottom: 40rpx;
      &-header{
        height: 84rpx;
        line-height: 84rpx;
        // background-color: #f7f7f9;

        &-title{
          font-size: 28rpx;
          position: relative;
          margin-left: 20rpx;
          &::before{
            content: '';
            position: absolute;
            width: 4rpx;
            height: 24rpx;
            top: 50%;
            left: -20rpx;
            transform: translateY(-50%);
            background-color: #fe5100;
          }
        }
      }

      &-item{
        justify-content: space-between;
        width: 100%;
        height: 82rpx;
        // line-height: 82rpx;
        margin-bottom: 61rpx;

        &-desc{
          // align-items: start;
        }

        &-title{
          font-size: 28rpx;
          color: #28292a;
          // margin-bottom: 10rpx;
          &--active{
            color: #ff3838;
          }
        }

        &-icon{
          width: 24rpx;
          height: 24rpx;
          margin-left: 20rpx;
        }

        &-date{
          font-size: 26rpx;
          color: #575958;
          margin-bottom: 4rpx;

          &--active{
            color: #ff3838;
          }
        }

        &-status{
          font-size: 26rpx;
          color: #575958;

          &-icon{
            width: 40rpx;
            height: 40rpx;
            margin-right: 24rpx;
          }

          &--active{
            color: #ff3838;
          }
        }
      }
    }

    // 直播简介
    &__desc{
      padding-bottom: 50rpx;
      // border-bottom: 4rpx solid #f5f5f5;
      &-title{
        position: relative;
        font-size: 30rpx;
        margin: 34rpx 0;
        margin-left: 20rpx;
        &::before{
          content: '';
          width: 4rpx;
          height: 24rpx;
          background-color: #fe5100;
          position: absolute;
          top: 50%;
          left: -20rpx;
          transform: translateY(-50%);
        }
      }
    }

  }

  // 互动部分
  &-interact{
    &__header{
      margin-top: 60rpx;
      &-icon{
        width: 40rpx;
        height: 40rpx;
        align-self: flex-start;
        margin-right: 30rpx;
      }

      &-title{
        width: 587rpx;
        font-size: 26rpx;
        &-main{
          color: #333333;
        }

        &-sub{
          color: #575958;
        }
      }
    }

    &__items{
      margin-top: 40rpx;
    }

    &__item{
      margin-bottom: 30rpx;
      align-items: flex-start;
      &-avatar{
        width: 60rpx;
        height: 60rpx;
        margin-right: 10rpx;
        flex-shrink: 0;
      }

      &-info{

      }

      &-name{
        font-size: 26rpx;
        color: #575958;
      }

      &-content{
        font-size: 26rpx;
        color: #333333;
        background-color: #f7f7f9;
        border-radius: 10rpx;
      }
    }
  }

  // 图文部分
  &-pic{
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 20rpx;
    &__item{
      width: 330rpx;
      height: 254rpx;
      flex-shrink: 0;
      border-radius: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  // 榜单部分
  &-list{
    &__names{
      margin:34rpx 0;
    }

    &__name{
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #28292a;
      background-color: rgba(#ff9200,.2);
      &--active{
        color: #fff;
        font-weight: bold;
        background-color: #ffa12d;
      }

      &--left{
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
      }

      &--right{
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
      }
    }

    &__users{

    }

    &__user{
      justify-content: space-between;
      width: 100%;
      height: 142rpx;
      box-sizing: border-box;
      padding: 0 20rpx;
      &-num{
        color: #767676;
        font-size: 26rpx;
      }

      &-desc{
        // flex: 1;
        width: 150rpx;
      }

      &-avatar{
        width: 60rpx;
        height: 60rpx;
        border-radius: 10rpx;
        margin-right: 10rpx;
      }

      &-name{
        font-size: 26rpx;
        color: #1a1a1a;
      }

      &-data{
        width: 216rpx;
        font-size: 26rpx;
        color: #767676;
        text-align: end;

        &-value{
          color: #fe5100;
        }
      }



    }
  }

  // 商城部分
  &-mall{
    padding-top: 40rpx;
  }

  // 底部作者展示
  &-author{
    width: 100%;
    height: 132rpx;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 24rpx;
    // padding-top: 34rpx;
    // padding-bottom: 34rpx;

    &--fixed{
      position: fixed;
      bottom: 0;
    }
    &__info{
      &-avatar{
        width: 60rpx;
        height: 60rpx;
        border-radius: 20rpx;
        margin-right: 10rpx;
      }

      &-name{
        font-size: 24rpx;
        color: #333333;
      }

      &-date{
        font-size: 20rpx;
        color: #808080;
      }
    }

    &__datas{
      width: 400rpx;
      justify-content: space-between;
    }

    &__data{
      align-items: center;
      &-value{
        font-size: 24rpx;
        color: #333333;
      }

      &-icon{
        width: 33rpx;
        height: 33rpx;
      }
    }
  }

  // 发布言论部分
  &-speak{
    &__input{
      width: 240rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background-color: #bababa;
      font-size: 30rpx;
      color: #575958;
      box-sizing: border-box;
      padding-left: 40rpx;
    }
  }

}
</style>
